<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<form>
		<table>
			<tr>
				 <td>用户名：</td>             <!--219971207 傅博英 -->
				<td><input type="text" name="name" id="name"></td>
				<td><span id="error-msg"></span></td> <!-- 用于显示错误消息的元素 -->
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="password" id=""></td> <!-- 密码输入框 -->
			</tr>
		</table>
	</form>
	<script>
		var nameinput = document.querySelector("#name"); // 获取用户名输入框元素
		var errorMsg = document.querySelector("#error-msg"); // 获取错误消息元素

		nameinput.addEventListener("blur", function () {      // 当用户名输入框失去焦点时触发事件处理函数
			var xhr = new XMLHttpRequest();                   // 创建XMLHttpRequest对象
			var url = "https://mock.apifox.cn/m1/2851106-0-default/fbj"; // 模拟API的URL
			url += "?username=" + nameinput.value;

			xhr.open("GET", url, true); // 设置异步GET请求
			xhr.send();               // 发送请求
			xhr.onreadystatechange = function () {
				if (xhr.readyState === 4 && xhr.status === 200) {
					var result = xhr.responseText;

					if (result == "1") {
						errorMsg.innerHTML = "用户名已存在"; // 更新错误消息元素的内容
					} else {
						errorMsg.innerHTML = "ok"; // 更新错误消息元素的内容
					}
				}
			};
		});
	</script>
</body>

</html>